<template>
  <a-card :bordered="false">
    <a-spin :spinning="confirmLoading">
      <a-tabs default-active-key="1">
        <a-tab-pane
          key="1"
          tab="发送邮件"
          @change="tabsCallback"
          v-if="hasPerm('email:sendEmail')"
        >
          <a-form :form="form1">
            <a-form-item label="收件邮箱">
              <a-input
                placeholder="请输入收件邮箱"
                v-decorator="[
                  'to',
                  {
                    rules: [
                      { type: 'email', message: '请输入正确的邮箱!' },
                      { required: true, message: '请输入收件邮箱！' },
                    ],
                  },
                ]"
              />
            </a-form-item>
            <a-form-item label="邮件标题">
              <a-input
                placeholder="请输入邮件标题"
                v-decorator="[
                  'title',
                  { rules: [{ required: true, message: '请输入邮件标题！' }] },
                ]"
              />
            </a-form-item>
            <a-form-item label="邮件内容">
              <a-textarea
                :rows="4"
                placeholder="请输入备注"
                v-decorator="[
                  'content',
                  { rules: [{ required: true, message: '请输入邮件内容！' }] },
                ]"
              ></a-textarea>
            </a-form-item>
            <a-form-item class="subForm-item">
              <a-button
                type="primary"
                @click="handleSubmit1"
                :loading="confirmLoading"
              >
                发送
              </a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane
          key="2"
          tab="发送Html邮件"
          @change="tabsCallback"
          v-if="hasPerm('email:sendEmailHtml')"
        >
          <a-form :form="form2">
            <a-form-item label="收件邮箱">
              <a-input
                placeholder="请输入收件邮箱"
                v-decorator="[
                  'to',
                  {
                    rules: [
                      { type: 'email', message: '请输入正确的邮箱!' },
                      { required: true, message: '请输入收件邮箱！' },
                    ],
                  },
                ]"
              />
            </a-form-item>
            <a-form-item label="邮件标题">
              <a-input
                placeholder="请输入邮件标题"
                v-decorator="[
                  'title',
                  { rules: [{ required: true, message: '请输入邮件标题！' }] },
                ]"
              />
            </a-form-item>
            <a-form-item label="邮件内容">
              <antd-editor
                :uploadConfig="editorUploadConfig"
                v-model="editorContent"
                @onchange="changeEditor"
                @oninit="getEditor"
              />
            </a-form-item>
            <a-form-item class="subForm-item">
              <a-button
                type="primary"
                @click="handleSubmit2"
                :loading="confirmLoading"
              >
                发送
              </a-button>
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-card>
</template>

<script>
import { emailSendEmail, emailSendEmailHtml } from '@/api/modular/system/emailManage';
import { AntdEditor } from '@/components';
import { sysFileInfoUpload } from '@/api/modular/system/fileManage';
import { baseURL } from '@/config/net.config';

export default {
  components: {
    AntdEditor,
  },

  data() {
    return {
      editorContentText: '',
      editorUploadConfig: {
        method: 'http',
        callback: this.editorUploadImage,
      },
      confirmLoading: false,
      editorContent: '',
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
    };
  },

  methods: {

    tabsCallback(key) {
      if (key === '1') {
        // eslint-disable-next-line no-labels
        form1: this.$form.createForm(this);
        this.form2.resetFields();
        this.editor.txt.clear();
      }
      if (key === '2') {
        // eslint-disable-next-line no-labels
        form2: this.$form.createForm(this);
        this.form1.resetFields();
      }
    },
    /**
       * 编辑器回调上传及回传图片url
       */
    editorUploadImage(files, insert) {
      const formData = new FormData();
      files.forEach(file => {
        formData.append('file', file);
      });
      sysFileInfoUpload(formData).then((res) => {
        if (res.success) {
          insert(baseURL + '/sysFileInfo/preview?id=' + res.data);
        } else {
          this.$message.error('编辑器上传图片失败：' + res.message);
        }
      });
    },
    getEditor(editor) {
      this.editor = editor;
    },
    changeEditor(html, ele) {
      this.editorContent = html;
      this.editorContentText = ele.text();
    },

    /**
       * 发送邮件
       */
    handleSubmit1() {
      const { form1: { validateFields } } = this;
      this.confirmLoading = true;
      validateFields((errors, values) => {
        if (!errors) {
          emailSendEmail(values).then((res) => {
            if (res.success) {
              this.$message.success('发送成功');
              this.confirmLoading = false;
              this.form1.resetFields();
            } else {
              this.$message.error('发送失败：' + res.message);
            }
          }).finally((res) => {
            this.confirmLoading = false;
          });
        } else {
          this.confirmLoading = false;
        }
      });
    },
    /**
       * 发送Html邮件
       */
    handleSubmit2() {
      const { form2: { validateFields } } = this;
      // eslint-disable-next-line eqeqeq
      if (this.editorContent == '') {
        this.$message.error('请填写邮件内容');
        return;
      }
      this.confirmLoading = true;
      validateFields((errors, values) => {
        if (!errors) {
          values.content = this.editorContent;
          emailSendEmailHtml(values).then((res) => {
            if (res.success) {
              this.$message.success('发送成功');
              this.confirmLoading = false;
              this.editor.txt.clear();
              this.form2.resetFields();
            } else {
              this.$message.error('发送失败：' + res.message);
            }
          }).finally((res) => {
            this.confirmLoading = false;
          });
        } else {
          this.confirmLoading = false;
        }
      });
    },

  },
};
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
</style>
